// ajax请求参数   params: 参数
let params = {
  pagenum: 1,// 获取第一页的数据
  pagesize: 2,// 每页两条数据
  // state:
  // cate_id:
}

// 封装函数，获取文章，渲染到 tbody中
function renderArticle() {
  axios.get('/my/article/list', { params }).then(res => {
    console.log(res.data);
    // 解构赋值
    let { status, data, total } = res.data;
    if (status === 0) {
      let str = '';
      data.forEach(item => {
        str += `<tr>
        <td>${item.title}</td>
        <td>${item.cate_name}</td>
        <td>${item.pub_date}</td>
        <td>${item.state}</td>
        <td>
          <button type="button" class="layui-btn layui-btn-xs">编辑</button>
          <button type="button" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
        </td>
      </tr>`
      });
      // 把str添加到 tbody中
      $('tbody').html(str);
      // 处理完数据，调用分页函数
      showPage(total);
    }
  })
};
renderArticle()


// ------------------------分页-----------------------------
// 实现分页，就是修改请求参数（pagenum和pagesize），然后重新发送ajax请求，重新渲染页面。
// 用 layui 提供的分页模块
let laypage = layui.laypage;
// 把分页封装成函数，为了使用 total 总数，在上面调用并传递总数
function showPage(total) {
  // 执行一个laypage实例
  laypage.render({
    elem: 'page', //注意，这里的 page 是 ID，不用加 # 号
    count: total, // 数据总数，从服务端得到
    limit: params.pagesize, // 每页显示的条数，laypage将会借助count和limit计算出分页数。
    curr: params.pagenum,  // 当前页
    // prev: '上一篇',  // 改变上一页的文字说明，这里不用改
    limits: [2, 3, 5, 10],  // 改变下拉框可选择每页显示的条数
    layout: ['limit', 'prev', 'page', 'next', 'count', 'skip'],  // 自定义排版。
    jump: function (obj, first) {
      //首次不执行
      if (!first) {
        //do something
        // obj包含了当前分页的所有参数，比如：
        // console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
        // console.log(obj.limit); // 得到每页显示的条数
        params.pagenum = obj.curr;
        params.pagesize = obj.limit;
        renderArticle();
      }
    }
  });
}


// ------------------------筛选-----------------------------
// 获取真实的分类
axios.get('/my/category/list').then(res => {
  let { status, data } = res.data;
  if (status === 0) {
    // console.log(data);
    let str = '';
    data.forEach(item => {
      str += `<option value="${item.id}">${item.name}</option>`;
    })
    $('#category').append(str);
    // 更新渲染 -- lauyi 本身的问题，动态添加的表单元素没有渲染出来，用这种方法让select下面的option可以正常显示
    let form = layui.form;
    form.render("select");
  }
})


// 完成筛选
$('#search').on('submit', function (e) {
  e.preventDefault();
  // 获取下拉框的值
  let state = $('#state').val();
  let cate_id = $('#category').val();
  // console.log(state,cate_id);
  // 设置请求参数
  if (cate_id) {
    params.cate_id = cate_id;
  }
  else {
    // 如果没有选 cate_id 就把参数删了
    delete params.cate_id;  // delete用于删除对象的属性
  };
  if (state) {
    params.state = state;
  }
  else {
    // 如果没有选 state 就把参数删了
    delete params.state;  // delete用于删除对象的属性
  }

  // 筛选的时候，重置 pagenum=1; 防止出现bug -- 在第五页筛选，筛选完以后没有第五页
  params.pagenum = 1;
  // 发送请求，渲染页面 -- 执行渲染页面函数
  renderArticle();

})

